<!--  -->
<template>
  <div>
    <van-loading type="spinner" color="#1989fa" v-if="isloadinged"/>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div>
        <van-card v-for="item in newslists" :key="item.id" @click="run(item.id)">
          <div slot="thumb" style="width:100%;height:100%" class="image">
            <img :src="item.img_url" style="width:42px;height:42px" alt>
          </div>
          <div slot="desc" style="width:100%;height:17px;">
            <h3>{{item.title}}</h3>
          </div>
          <div slot="tags">
            <div type="danger" class="tag-l">发布时间：{{item.add_time.slice(0,10)}}</div>
            <div plain type="danger" class="tag-r">点击：{{item.click}}</div>
          </div>
        </van-card>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      isLoading: false,
      isLoading: false, //表示下拉刷新加载完成
      isloadinged: true,
      newslists: []
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getnewslist();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // console.log(1111);
  },
  methods: {
    onRefresh() {
      setTimeout(() => {
        Toast("刷新成功");
        this.isLoading = false;
        this.getnewslist();
      }, 1000);
    },
    async getnewslist() {
      const { data: res } = await this.$http.get("/api/getnewslist");
      if (res.status !== 0) return alert("获取新闻列表失败");
      setTimeout(() => {
        //0.8秒后隐藏加载动画
        this.isloadinged = false;
        this.newslists = res.message;
      }, 800);

      console.log(this.newslists);
    },
    run(id) {
      // console.log(id);
      this.$router.push("/newsdetail/" + id);
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.van-card__thumb img {
  border-radius: 0px;
}
.van-card {
  position: relative;
  box-sizing: border-box;
  padding: 8px 16px;
  color: #323233;
  font-size: 12px;
}
.van-card__content {
  top: -12px;
}
</style>